<template>
  <div class="container" style="height:100%;" ref="consDom">
    <el-row :gutter="10">
      <!-- left -->

      <!-- right -->
      <el-col :span="24" :xs="24">
        <div ref="colDom" style="position: absolute;height: 100%;"></div>
        <!-- form -->
        <div class="devList-top">
          <span>选择设备：</span>
          <el-form :model="form">
            <el-form-item prop="deptId">
              <treeselect
                v-model="form.deptId"
				@input='treeValueChange'
                :options="mapTreeData"
                :show-count="true"
                placeholder="请输入设备号查询"
				:disableFuzzyMatching='true'
              />
            </el-form-item>
            <!-- 查询 -->
          </el-form>
          <el-button
            style
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            >{{ $t('device.list.button.search') }}</el-button
          >
        </div>
        <el-row class="mb5">
          <el-col :span="20">
            <!-- 导出 -->
            <el-button
              type="warning "
              plain
              :disabled="multiple"
              icon="el-icon-download"
              v-hasPermi="['lgsv:send:export']"
              >{{ $t('device.record.button.export') }}</el-button
            >
          </el-col>
          <el-col :span="4">
            <right-toolbar
              :showSearch.sync="showSearch"
              :columns="columns"
            ></right-toolbar>
          </el-col>
        </el-row>
        <!-- tableData -->
        <u-table
          ref="multipleTable"
		  :big-data-checkbox="checked"
		  :row-height="storeTableHeight"
		  row-key="id"
		  use-virtual
		  fixed
          v-loading="loading"
          highlight-current-row
          border
		 
          v-if="isTable"
          :max-height="tableHeight"
          :default-sort="{ prop: 'fOfflineTime', order: 'descending' }"
        >
          <!-- checkbox多选框  align="center"-->
          <u-table-column type="selection" width="60" align="center" />
          <!-- 部门 -->
          <u-table-column
            prop="fNumber"
            :label="$t('program.AD.table.number')"
            sortable
            align="center"
            v-if="columns[0].visible"
          >
          </u-table-column>
          <!-- 上线时间 -->
          <u-table-column
            prop="fOnlineTime"
            :label="$t('device.record.table.onlineTime')"
            align="center"
            sortable
            v-if="columns[2].visible"
          >
          </u-table-column>
          <!-- 下线时间 -->
          <u-table-column
            prop="fOfflineTime"
            :label="$t('device.record.table.offLineTime')"
            align="center"
            sortable
            show-overflow-tooltip
            v-if="columns[1].visible"
          >
          </u-table-column>
        </u-table>
        <!-- 分页器 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getOnline"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getDev } from '@/api/system/map'
import Treeselect from '@riophae/vue-treeselect'
import { getRecord } from '@/api/equipment/list.js'
import { mapState, mapMutations } from 'vuex'
import { treeselect } from '@/api/system/dept' // import treeselect api
import '@riophae/vue-treeselect/dist/vue-treeselect.css' // import Treeselect styles
import { exist } from '@/api/EditorProgram/advertising' // import request api
export default {
  name: 'Record',
  components: { Treeselect },
  data () {
    return {
	  checked:true,
	  storeTableHeight:45,
      isTable: false,
      tableHeight: 0,
      total: 0, // 页码总条数
      sendList: [], // 发送列表
      filterText: '', // 部门名称
      deptOptions: undefined, // 部门树选项
      showSearch: true, // 显示搜索条件
      loading: false, // 遮罩层
      multiple: true, // 非多个checkbox禁用
      expandeds: [],
      ids: [], // 多选checkbox选择的值
      defaultProps: {
        children: 'children', // 指定子树为节点对象的某个属性值
        label: 'label' // 指定节点标签为节点对象的某个属性值
      },
      // 发送记录查询模型
      queryParams: {
        deptId: undefined, // 部门id
        fNumber: undefined, // 设备编号
        pageNum: 1, // 页码
        pageSize: 20 // 条数
      },
      form: {
        deptId: undefined
      },
      // 表格显隐列信息
      columns: [
        { key: 0, label: `设备号`, visible: true },
        { key: 1, label: `设备名称`, visible: true },
        { key: 2, label: `节目ID`, visible: true },
        { key: 3, label: `节目号`, visible: true },
        { key: 4, label: `节目名称`, visible: true },
        { key: 5, label: `是否存在设备`, visible: true },
        { key: 6, label: `节目开始时间`, visible: true },
        { key: 7, label: `节目结束时间`, visible: true },
        { key: 8, label: `发送进度`, visible: true },
        { key: 9, label: `发送状态`, visible: true },
        { key: 10, label: `错误日志`, visible: true },
        { key: 11, label: `添加时间ID`, visible: true }
      ],
      tableData: undefined,
      mapTreeData: [],
      quer2: {
        deptId: undefined
      }
    }
  },
  methods: {
    // 获取上下线数据
    getOnline () {
      getRecord(this.queryParams).then(res => {
        if (res.code == 200) {
          // console.log(res.rows)
          // this.tableData = res.rows
		  this.$refs.multipleTable.reloadData(res.rows)
          this.total = res.total
        }
      })
    },
    // currDeptChange (val) {
      // if (val == null || val == undefined || val == '') {
      //   return
      // }
      // if (val.length > 8) {
      //   this.queryParams.fNumber = val
      //   this.getOnline()
      // } else {
      //   this.queryParams.fNumber = ''
      //   this.form.deptId = undefined
      //   this.$message({
      //     showClose: true,
      //     message: '只能查询设备',
      //     type: 'warning'
      //   })
      // }
    // },
		treeValueChange(val){
			console.log(val)
			if (val == null || val == undefined || val == '') {
				return
			}
			if(val.length>8){
				this.queryParams.fNumber=val
				this.getOnline()
			}else{
				this.queryParams.fNumber=''
				this.$message({
					showClose: true,
					message:'只能查询设备',
					type: 'warning'
				});
				let that=this
				setTimeout(function(){
					that.form.deptId=undefined
				},100)
			}
		},
    // 查询部门下拉树结构
    getTreeselect () {
      getDev(this.quer2)
        .then(response => {
          // console.log(response.data)
          this.mapTreeData = response.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 搜索
    handleQuery () {
      this.queryParams.pageNum = 1
      this.queryParams.fNumber = this.form.deptId
      this.getOnline()
    },
    /** 重置按钮操作 */
    resetQuery () {
      // console.log('1')
      this.dateRange = [] // 清空日期选择器
      // this.resetForm('queryForm')
      this.queryParams.fNumber = ''
      this.handleQuery()
    }
  },
  computed: {
    ...mapState({ deptId: state => state.tree.dept.id })
  },
  mounted () {
    this.tableHeight =
      this.$refs.consDom.offsetHeight - this.$refs.colDom.offsetHeight - 80
    this.isTable = true
  },
 //  activated () {
	//   console.log(this.$store.state.tableHeight)
	
 //    if (this.$store.state.deptId) {
 //      this.queryParams.deptId = this.$store.state.deptId  
 //    }
	// this.getOnline()
 //  },
  activated () {
	  this.storeTableHeight=this.$store.state.tableHeight
    if (this.$store.state.deptId) {
      this.quer2.deptId = this.$store.state.deptId // 把点击获得的id赋值给queryParams模型id
      this.queryParams.deptId = this.$store.state.deptId
      this.getTreeselect()
      this.getOnline()
    }
  },
  watch: {
    // 根据名称筛选部门树
    // filterText (val) {
    //   this.$refs.tree.filter(val)
    // },
    // deptOptions: {
    //   handler () {
    //     this.deptOptions.forEach(item => {
    //       this.expandeds.push(item.id)
    //     })
    //   },
    //   deep: true
    // },
    // 'form.deptId': 'currDeptChange',
    '$store.state.deptId' (val) {
      this.quer2.deptId = val
      this.queryParams.deptId = val
      this.queryParams.fNumber = this.form.deptId
      this.getTreeselect()
      this.getOnline()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.devList-top {
  height: 45px;
  width: 450px;
  display: flex;
  border-radius: 5px;
  line-height: 45px;
  span {
    font-weight: 700;
    font-size: 14px;
  }
  .el-form {
    width:300px;
    top: 3px;
    left: 80px;
    z-index: 999;
    position: absolute;
  }
  .el-button {
    position: absolute;
    left: 400px;
    top: 5px;
  }
  .vue-treeselect__menu{
	overflow-x: auto;
	width:310px;
  }
  
  .vue-treeselect div, .vue-treeselect span{
  box-sizing:content-box;
  }
}
</style>
